<!-- 自定义文本显示 -->
<template>
	<div ref="label" id="label" class="calabel" 
		:style="[
			{textAlign, textDecoration}, 
			{userSelect: button ? 'none' : 'text'},
			{cursor: button ? 'pointer' : undefined},
			{'-webkit-line-clamp': lines, lineHeight: size * 1.2 + 'px'},
			custStyle
		]" :contenteditable="edit" :onClick="`event.cancelBubble = ${cancelBubble}`" @click="onClick($event, {disabled: 'edit'})"
	>
		<div v-for="(str, index) in strArr" :key="index">
			<span v-if="spaceList.length > 0" v-for="(item, index) in spaceList" :key="index" :style="[style(true)]">{{item}}</span>
			<block v-if="width">
				<span v-for="(a, idx) in str" :key="idx" :style="[style(false)]">{{a}}</span>
			</block>
			<span v-else :style="[style(false)]">{{lang(str)}}</span>
			<slot></slot>
		</div>
	</div>
</template>

<script>
	
	import base from '@/components/index.vue'
	
	export default {
		extends: base,
		emits: ['blur', 'click', 'awidth'],
		props: {
			// 要显示的文字。可识别\n和<bar/>用以分行
			text: [String, Number, Array, Boolean, Object],
			/**
			 * 标题类型
			 * 0或者false，是非标题
			 * true或者1，默认1级标题
			 * 大于1表示对应的标题
			 */
			title: [Boolean, Number, String],
			/**
			 * 开始的空格个数。有的字体不支持中文空格
			 * 也可以逐个遍历的形式，找到中文空格，逐个写入。该方案暂不落实
			 */
			space: {
				type: [String, Number],
				default: 0
			},
			//  是否可编辑。小程序中无效
			edit: Boolean,
			// 最多显示几行
			lines: [String, Number],
			/**
			 * 允许选中样式
			 * auto: 默认。如果浏览器允许，则可以选择文本。
			 * none: 防止文本选取。
			 * text: 文本可被用户选取。
			 * all: 单击选取文本，而不是双击。
			 */
			userSelect: String,
			// 文字对齐方式
			textAlign: String,
			/**
			 * 文字线条类型
			 * 也可以并列设置多个，如：textDecoration: 'underline overline'
			 * 也可以设置颜色，如：textDecoration: 'underline wavy red' 红色波浪形下划线
			 * none：无
			 * underline：下划线
			 * line-through：中划线
			 * overline：上划线
			 * blink：闪烁
			 */
			textDecoration: String,
			// 字体类型
			family: {
				type: String,
				default: 'main'
			},
			// 字体大小
			size: [String, Number],
			// 字体颜色
			color: String,
			// 字重类型
			weight: String,
			/**
			 * 是否阻隔事件传递。该值对小程序无效。
			 * 对策：
			 * 1，外面包一层div使用click.stop=e => core.common.onStop(e)
			 * 2，event.stopPropagation()
			 * 实测2无效！
			 */
			cancelBubble: Boolean,
			/**
			 * 光标类型
			 * pointer：鼠标手型
			 * not-allowed：鼠标禁止
			 * zoom-in：鼠标放大
			 * zoom-out：鼠标缩小
			 * grab：鼠标拖拽
			 * crosshair: 鼠标十字
			 * https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor
			 */
			cursor: String,
			// 是否作为按钮使用。userSelect默认为none，cursor默认为pointer
			button: Boolean,
			// 单个文字的宽度。如果没有指定就默认宽度
			width: Number,
			// 自定义样式
			custStyle: Object
		},
		watch: {
			text: {
				immediate: true,
				handler(value) {
					var arr = []
					if (value || value === 0) {
						if (typeof(value) === 'number') {
							value += ''
						}
						if (Array.isArray(value)) {
							arr = value
						} else {
							if (typeof(value) === 'object') {
								arr = [JSON.stringify(value)]
							} else if (typeof(value) === 'string') {
								const a = value.split('\n')
								a.forEach(str => {
									arr = arr.concat(str.split('<br/>'))
								})
							} else {
								arr = [value + '']
							}
						}
					}
					this.strArr = arr
				}
			},
			edit: {
				immediate: true,
				handler(value) {
					this.listenerLabelBlur()
				}
			}
		},
		data() {
			return {
				// 实际要显示的文本
				strArr: [],
				// 是否已经监听了
				alreadyListenner: false,
			}
		},
		computed: {
			spaceList() {
				const res = parseInt(this.space)
				const list = []
				if (res > 0) {
					for (let i = 0; i < res; i++) {
						list.push(this.core.synctool.space)
					}
				}
				return list
			}
		},
		mounted() {
			
		},
		methods: {
			// 监听编辑变化
			listenerLabelBlur() {
				if (this.edit && !this.alreadyListenner) {
					this.$nextTick(() => {
						if (this.$refs.label) {
							this.alreadyListenner = true
							const that = this
							that.$refs.label.addEventListener("blur", e => {
								that.$emit('blur', e.target.innerText)
							})
						}
					})
				}
			},
			/**
			 * 文本样式
			 * 有的字体类型不支持空格
			 */
			style(space) {
				var {textAlign, family, color, weight, size, title, width} = this
				const {theme} = this.core
				var display
				if (width) {
					width = typeof(width) === 'number' ? (width + 'px') : width
					textAlign = 'center'
					display = 'inline-block'
				}
				return {
					textAlign, width, display,
					color: theme.color[color] || color,
					fontFamily: space ? undefined : family,
					fontWeight: weight ? theme.fontWeight[weight] || weight : title ? '600' : undefined,
					fontSize: size ? theme.fontSize(size) : title ? (14 + parseInt(title) * 2 + 'px') : undefined,
				}
			}
		},
		beforeDestroy() {
			// this.$refs.label.removeEventListener("blur") // 代码报错
		},
		destroyed() {
			// this.$refs.label.removeEventListener("blur") // 代码报错
		}
	}
</script>

<style>
	/**
	 * 默认显示三行
	 */
	.calabel {
		cursor: pointer;
		overflow: hidden;
		text-overflow: ellipsis; 
		display: -webkit-box;
		-webkit-box-orient: vertical;
		/* -webkit-line-clamp: 3; */
	}
	
	::selection { /* 伪类不会影响到输入框等表单元素的默认行为；若想完全禁止文本选中，则可以将user-select属性的值设置为none */
		/* 选中区域的背景色 */
		/* background-color: yellow; */
		/* 选中区域的字体颜色 */
		/* color: black; */
	}
</style>